<template>
  <div class="descrip">
    <affix label="网站客服接入代码"></affix>
    <div class="content">
      <p>将下面一段代码复制并粘贴到你网站的</body>标签之前，保存并发布网站，即可完成在线客服的植入。植入完成后可点击下方的检测按钮检测是否植入成功。默认客服按钮为网站最下角自动弹出式，您也可以自定义客服按钮，并将其放置到您网站的任何位置。</p>
      <div class="code_text">
        <span class="iconfont icon-fuzhi" @click="copyText('embed')"><span>复制到剪切板</span></span>
        <code class="embed">&lt;script type='text/javascript' src='{{webchatUrl}}/javascripts/7moorInit.js?accessId={{accessID}}&autoShow=true&language=ZHCN'
          async='async'><br>&lt;/script&gt;
          <span class="nodes">// language用于控制访客端展示的语言类型，language=ZHCN为中文，language=EN为英文，您可按需设置一种语言类型</span></code>
      </div>
      <h4>以下代码为可选部分:</h4>
      <p>如果您想自定义自己的用户id（默认由系统随机生成用户id），将这段代码放在全局，且在上面那段js脚本之前，并赋予qimoClientId变量一个值,该值为string类型或json类型.string类型则该值为用户id,用户id必须唯一.</p>
      <div class="code_text">
        <span class="iconfont icon-fuzhi" @click="copyText('custom_id')"><span>复制到剪切板</span></span>
        <code class="custom_id">&lt;script type='text/javascript'&gt;
          <p>var qimoClientId = '123abc';<span class="nodes">// 自定义用户的唯一id,由英文字母,数字,下划线组成</span></p>
          &lt;/script&gt;
        </code>
      </div>
      <p>或</p>
      <div class="code_text">
        <span class="iconfont icon-fuzhi" @click="copyText('custom_id_obj')"><span>复制到剪切板</span></span>
        <code class="custom_id_obj"> &lt;script type='text/javascript'&gt;
          <p>var qimoClientId = {userId: '123abc', nickName:'test',agent:'8001',customField: {}, priority: false};</p>
          <p class="nodes">// 自定义用户的唯一id,userId由英文字母,数字,下划线组成</p>
          <p class="nodes">// agent 为此次访问的专属座席工号，如果您想自定义访客的专属座席，可以动态设置agent字段,如果您不需要此功能，请勿设置agent字段。</p>
          <p class="nodes">// peerId  为此次访问的专属技能组编号，如果您想自定义会话的进线技能组，可以动态设置peerId字段,如果您不需要此功能，请勿设置agent字段。</p>
          <p class="nodes">//WAP和H5渠道，若需要使用自定义字段，则直接将customField字段的对象拼接在页面后方即可，如：wapchat.html?customField={"测试字段":"123"}</p>
          <p class="nodes">// priority 为是否优先进线设置，非必填，值为boolean类型的true或false</p>
          &lt;/script&gt; </code>
      </div>
    </div>
    <affix label="自定义“在线咨询按钮"></affix>
    <div class="content">
      <p>完成上述的步骤后，如果您想自定义客服按钮,将上述步骤代码里的autoShow的值改为false。自定义完您的客服按钮后，将下面的代码做为客服按钮的点击事件。</p>
      <div class="code_text">
        <span class="iconfont icon-fuzhi" @click="copyText('click_ev')"><span>复制到剪切板</span></span>
        <code class="click_ev">qimoChatClick();</code>
      </div>
      <p class="examp">例子</p>
      <div class="code_text">
        <span class="iconfont icon-fuzhi" @click="copyText('example')"><span>复制到剪切板</span></span>
        <code class="example">
          &lt;button onclick="qimoChatClick();"&gt;在线咨询&lt;/button&gt;
        </code>
      </div>
    </div>
    <affix label="检测接入网站是否植入成功"></affix>
    <div class="content">
      <p>网站植入上方的代码后，待成功发布网站后，访问网站后，在下方输入您 要检测的网站域名并点击下方的检测按钮开始检测是否植入成功。</p>
      <div class="test">
        <span>网站域名</span><el-input v-model="testUrl"></el-input><span class="start_test" @click="startTest">开始检测</span>
      </div>
    </div>
    <affix label="外引链接"/>

    <div class="content">
      <p>点击下方的链接可直接让您的用户联系到您，而不需要在网站嵌入任何代码。您也可以将此链接分享到各种社交平台，让用户随时随地都能联系到您。</p>
      <p>温馨提示：外引链接目前有两种展示方式，一种为下方的链接，另一种是网站客服页面在新页面打开，此种方式需要将下方链接中的wapchat.html更改为pcwebchat.html</p>
      <out-web-link-index
      :access-url="accessUrl"
      :access-id="accessID"/>
    </div>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix'
  import Clipboard from 'clipboard-js'
  import OutWebLinkIndex from './OutWebLinkIndex'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        accessID: '',
        url: '',
        testUrl: ''
      }
    },
    components: {
      OutWebLinkIndex,
      affix
    },
    methods: {
      // watch 监测执行, 确保accessID 获取为最新
      computedAccessId () {
        this.accessID = this.accessId
        this.url = `${this.webchatUrl}/wapchat.html?accessId=${this.accessId}&fromUrl=设置您自己的来源`
      },
      // 复制剪切板的操作
      copyText (name) {
        let self = this
        Clipboard.copy(document.getElementsByClassName(name)[0].innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      // 检测是否植入成功
      startTest () {
        let data = {
          location: this.testUrl,
          accessId: this.accessID
        }
        if (!data.location) {
          this.$message.error('请输入要校验的域名')
          return
        }
        this.$store.dispatch('checkWebSiteEmebedScript', data).then(res => {
          if (res && res.success) {
            this.$message('植入成功')
          }
        })
      }
    },
    props: {
      accessId: String,
      webchatUrlIn: String
    },
    computed: {
      accessUrl () {
        return `${this.webchatUrl}/wapchat.html?accessId=${this.accessID}&fromUrl`
      },
      webchatUrl () {
        return this.webchatUrlIn
      }
    },
    watch: {
      webchatUrlIn () {
        this.computedAccessId()
        this.testUrl = ''
      },
      accessId () {
        this.computedAccessId()
        this.testUrl = ''
      }
    },
    beforeMount () {
      this.computedAccessId()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  /* 简单版设置，此处高度需要更改下 */
  .new-config
    .descrip
      height calc(100vh - 130px)
  .descrip
    height calc(100vh - 250px)
    overflow auto
    padding 0px 20px 40px 20px
    .ui-affix
      margin-top 54px
      padding-bottom 0
    .content
      padding-left 16px
      .examp
        color $c-prompt
      h4
        margin 16px 0 4px 0
        font-size 16px
        line-height 16px
      .test
        .el-input
          width 240px
          margin 0 16px
        .start_test
          min-width 90px
          display inline-block
          height 24px
          line-height 24px
          text-align center
          border 1px solid $c-main
          border-radius 3px
          cursor pointer
      p
        margin 6px 0
        line-height 18px
      .code_text
        position relative
        background $c-back
        padding 16px
        code
          line-height: 20px
          width 705px
          display block
          p
            text-indent 2em
            margin 0
        .embed
          /*width 520px*/
        .iconfont
          color $c-main
          position absolute
          right 16px
          top 16px
          cursor pointer
          font-size 12px
          span
            color $cf-gray0
            margin-left 6px
</style>
